<template>
  <transition name="slide">
    <div class="box">
      <mt-header :title="title" class="mt-header">
            <router-link to="/" slot="left">
              <mt-button class="iconfont icon-jiantou3"></mt-button>
            </router-link>
            <mt-button icon="more" slot="right"></mt-button>
          </mt-header>
      <div class="Con">
        <div class="content">
          <div class="picture">
            <img :src="img" alt="">
          </div>
          <div class="dec">
            <!-- 商品价格 -->
            <div class="pro-header">
              <div class="pro-price">
              ￥{{ year }}
              </div>
              <div class="pro-sale">6.6折</div>
            </div>
            <!-- 商品名称 -->
            <div class="pro-content">
              {{ title }}
            </div>
            <!-- 商品介绍 -->
            <div class="pro-introduce">
              品牌: 侍小姐<br/>
              纯色风格: 通勤通勤  韩版领子  连帽衣门襟<br/>
              拉链颜色分类: 灰色 黑色 雾霾蓝 米色<br/>
              材质: 聚酯纤维
            </div>
            <!-- 官方网站。正品保证部分 -->
            <div class="pro-other">
              <ul class="pro-other-list">
                <li class="iconfont icon-shoucang3">大牌女装双11预售热卖中，预付定金+店铺券</li>
                <li class="iconfont icon-shoucang3">官方网站，正品保证</li>
                <li class="iconfont icon-shoucang3">除偏远地区外均免邮费</li>
              </ul>
            </div>
          <div class="goods">
          <div class="goods-title">
            <h1>精选好货</h1>
          </div>
          <div class="goods-list">
            <mt-swipe :show-indicators="false">
              <!-- 1 -->
              <mt-swipe-item>
                <!-- 1-1 -->
                <div class="goods-li" @click= "goDetail(tit1)">
                  <img :src="tit1.images.small" />
                  <div class="goods-li-content">
                    <div class="price">
                      <span>
                        ￥{{tit1.rating.average}}
                      </span>
                      <span>
                        ￥{{tit1.year}}
                      </span>
                    </div>
                    <p>
                      {{tit1.title}}
                    </p>
                  </div>
                </div>
                <div class="goods-li">
                  <!-- 1-2 -->
                  <div class="goods-li" @click= "goDetail(tit2)">
                    <img :src="tit2.images.small" alt="" />
                    <div class="goods-li-content">
                      <div class="price">
                        <span>
                          ￥{{tit2.rating.average}}
                        </span>
                        <span>
                          ￥{{tit2.year}}
                        </span>
                      </div>
                      <p>
                        {{tit2.title}}
                      </p>
                    </div>
                  </div>
                </div>
              </mt-swipe-item>
              <!-- 2 -->
              <mt-swipe-item>
                <!-- 2-1 -->
                <div class="goods-li"  @click= "goDetail(tit3)">
                  <img :src="tit3.images.small" alt="" />
                  <div class="goods-li-content">
                    <div class="price">
                      <span>
                        ￥{{tit3.rating.average}}
                      </span>
                      <span>
                        ￥{{tit3.year}}
                      </span>
                    </div>
                    <p>
                      {{tit3.title}}
                    </p>
                  </div>
                </div>
                <div class="goods-li">
                  <!-- 2-2 -->
                  <div class="goods-li" @click= "goDetail(tit4)">
                    <img :src="tit4.images.small" alt="" />
                    <div class="goods-li-content">
                      <div class="price">
                        <span>
                          ￥{{tit4.rating.average}}
                        </span>
                        <span>
                          ￥{{tit4.year}}
                        </span>
                      </div>
                      <p>
                        {{tit4.title}}
                      </p>
                    </div>
                  </div>
                </div>
              </mt-swipe-item>
            </mt-swipe>
          </div>
        </div>
        <!-- 攻略——精选好货 结束-->
          <!-- 评论部分——开始 -->
          <div class="comment-box">
          <!-- 攻略——评论——标题 -->
          <div class="comment-title">
            <p>评论</p>
          </div>
          <!-- 评论内容 -->
          <ul class="comment-ul">
            <!-- 第一条评论 -->
              <li class="comment-li">
                  <img :src="ctit1.images.small" />
                  <div>
                      <h2>{{ ctit1.title }}</h2>
                      <p>{{ ctit1.genres }}</p>
                      <span>{{ ctit1.year }}</span>
                  </div>
              </li>
              <!-- 第二条评论 -->
              <li class="comment-li">
                  <img :src="ctit2.images.small"/>
                  <div>
                      <h2>{{ ctit2.title }}</h2>
                      <p>{{ ctit2.genres }}</p>
                      <span>{{ ctit2.year }}</span>
                  </div>
              </li>
              <!-- 第三条评论 -->
              <li class="comment-li">
                  <img :src="ctit3.images.small"/>
                  <div>
                      <h2>{{ ctit3.title }}</h2>
                      <p>{{ ctit3.genres }}</p>
                      <span>{{ ctit3.year }}</span>
                  </div>
              </li>
              <router-link to="/kindcomment" class="comment-li-more">
                <p>查看全部评论</p>
              </router-link>
          </ul>
        </div>
          <!-- 评论部分——结束 -->
        </div>
      </div>
    </div>
      <footer class="footer">
        <ul>
          <router-link :to="item.path" tag="li" v-for = "(item, index) of list " :key = "index">
          <span :class="item.icon"></span>
          <p>{{item.name}}</p>
          </router-link>
        </ul>
      </footer>
    </div>
  </transition>
</template>

<script>
// import Commentlist from '@/components/detail/Commentlist'
import detail from '@/components/detail/Index'
import Vue from 'vue'
import { Swipe, SwipeItem } from 'mint-ui'
// import axios from 'axios'
Vue.use(Swipe, SwipeItem)
export default {
  props: ['id'],
  data () {
    return {
      title: '',
      img: '',
      rating: '',
      year: '',
      detail: [],
      tit1: '',
      tit2: '',
      tit3: '',
      tit4: '',
      ctit1: '',
      ctit2: '',
      ctit3: '',
      // commentlist: [],
      list: [{
        name: '收藏',
        icon: 'iconfont icon-shoucang1',
        path: '/home'
      }, {
        name: '评论',
        icon: 'iconfont icon-comment',
        path: '/kind'
      }, {
        name: '购物车',
        icon: 'iconfont icon-gouwucheman',
        path: '/cart'
      }, {
        name: '立即购买',
        path: '/user'
      }]
    }
  },
  components: {
    // Commentlist
    detail
  },
  // created () {
  //   axios.get('/taotao/douban')
  //     .then(data => {
  //       console.log(data)
  //       this.commentlist = data.data
  //     })
  // },
  created () {
    fetch('/taotao/douban').then(res => res.json())
      .then(data => {
        console.log(data)
        this.tit1 = data[0]
        this.tit2 = data[1]
        this.tit3 = data[2]
        this.tit4 = data[3]
      })
    fetch('/taotao/douban').then(res => res.json())
      .then(data => {
        console.log(data, '评论')
        this.ctit1 = data[0]
        this.ctit2 = data[1]
        this.ctit3 = data[2]
      })
  },
  methods: {
    goDetail (item) {
      this.$router.push(`/detail/${item.id}`)
    },
    back () {
      this.$router.go(-1)
      // console.log()
    }
  },
  mounted () {
    console.log(this.$route)
    const { id } = this.$route.params
    fetch(`/taotao/detail?id=${id}`).then(res => res.json())
      .then(data => {
        console.log(data)
        this.title = data[0].title
        this.img = data[0].images.small
        this.year = data[0].year
      })
  }
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
.Con{
  flex: 1;
  overflow-y: auto
}
.jiantou3 {
    line-height: 0.44rem
}
.content {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: auto;
  .picture {
  width: 100%;
  height: 3rem;
  img {
    width: 100%;
    height: 100%
  }
}
  .dec {
    width: 100%;
    padding: 0.08rem;
    height: auto;
    .pro-header {
      width: 100%;
      height: 0.5rem;
      border-bottom: 0.01rem solid #ccc;
      .pro-price {
        width: 40%;
        height: 0.5rem;
        line-height: 0.5rem;
        font-size: 0.18rem;
        color: #000;
        font-weight: 600;
        float:left
      }
      .pro-sale {
        width: 20%;
        height: 0.5rem;
        line-height: 0.5rem;
        float: left;
        font-size: 0.16rem;
        color: #df5e62
      }
    }
    .pro-content {
      width: 100%;
      height: 0.6rem;
      font-size: 0.16rem;
      line-height: 0.6rem;
    }
    .pro-introduce {
      width: 100%;
      height: 1rem;
      background-color: #f5d6c2;
      font-size: 0.16rem
    }
    .pro-other {
      width: 100%;
      height: 1.2rem;
      padding: 0.08rem;
      border-bottom: 0.01rem solid #ccc;
      .pro-other-list {
        width: 100%;
        height: 1.04rem;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .iconfont {
        font-size: 0.16rem
      }
      }
    }
  }
  // 评论部分
.comment-box {
  min-height: 2rem;
  //攻略--评论--标题
  .comment-title {
    @include rect(100%, 0.3rem);
    color: #000;
    font-size: 0.2rem;
    line-height: 0.3rem;
    p {
      float: left;
      @include margin(0 0.1rem 0 0.3rem);
    }
  }
}
//评论--内容
.comment-ul {
    min-height: 0.9rem;
    color: #000;
    .comment-li {
        @include rect(100%, 0.9rem);
        display: flex;
        justify-content: center;
        align-items: center;
        img {
            @include rect(0.6rem, 0.6rem);
            @include margin(0.1rem 0.1rem);
            border-radius: 50%;
            border: 0.01rem solid #ccc;
            float: left;
        }
        div {
            @include rect(78%, 100%);
            padding: 0.1rem 0.1rem;
            float: right;
            @include border(0 0 0.01rem 0, #ccc, solid);
            h2 {
                @include rect(100%, 0.28rem);
                line-height: 0.2rem;
                font-size: 0.16rem;
            }
            p {
                @include rect(100%, 0.4rem);
                line-height: 0.2rem;
            }
            span {
              display: block;
              @include rect(95%, 0.1rem);
              line-height: 0.1rem;
              font-size: 0.1rem;
              text-align: right;
              color: #777
            }
        }
    }
}
.comment-li-more {
  @include rect(100%, 0.4rem);
  text-align: center;
  color: #df5e62;
  line-height: 0.4rem
}
}
.footer {
  ul {
    @include rect(100%, 100%);
    @include flexbox();
    li {
      @include flex();
      @include rect(auto, 100%);
      @include flexbox();
      @include flex-direction(column);
      @include justify-content();
      @include align-items();
      &.router-link-exact-active.router-link-active {
        @include text-color(#f66);
      }
      span {
        @include font-size(0.22rem);
      }
      p {
        @include font-size(0.12rem);
      }
    }
  }
}
//攻略--精选好货
.goods {
  @include rect(100%, 2.6rem);
  color: #000;
  //攻略--精选好货--title
  .goods-title {
    @include border(0 0 0.03rem 0, #e5e5e5, solid);
    h1 {
      @include rect(100%, 0.4rem);
      @include margin(0 0.3rem);
      line-height: 0.4rem;
      font-size: 0.18rem
    }
  }
  //攻略--精选好货--商品列表
  .goods-list {
    @include rect(96%, 2.2rem);
    @include margin(0.08rem 0.08rem 0.08rem 0.08rem);
    .goods-li {
      @include rect(45%, 2.1rem);
      @include margin(0 0.085rem);
      float: left;
      @include flexbox();
      @include justify-content();
      @include flex-direction(column);
      @include align-items();
      img {
        @include rect(1.5rem, 1.5rem);
        background: #e5e5e5;
        display: block
      }
      .goods-li-content {
        @include rect(1.5rem, 0.6rem);
        .price {
          @include rect(100%, 0.24rem);
          color: #ea9c9a;
          margin-top: 0.03rem;
          span:first-child {
            line-height: 0.24rem;
          }
          span:last-child {
            color: #e5e5e5;
            text-decoration: line-through;
            font-size: 0.1rem
          }
        }
        p {
          @include rect(100%, 0.36rem);
          line-height: 0.18rem;
          font-size: 0.14rem;
          margin-top: 0.03rem
        }
      }
    }
  }

}
</style>
